```jsx
import * as menu from "@zag-js/menu"
import { useMachine, normalizeProps } from "@zag-js/react"
import { useState } from "react"

const data = {
  order: [
    { label: "Ascending", value: "asc" },
    { label: "Descending", value: "desc" },
    { label: "None", value: "none" },
  ],
  type: [
    { label: "Email", value: "email" },
    { label: "Phone", value: "phone" },
    { label: "Address", value: "address" },
  ],
}

export function Menu() {
  const [order, setOrder] = useState("")
  const [type, setType] = useState([])

  const service = useMachine(menu.machine, { id: "1" })

  const api = menu.connect(service, normalizeProps)

  const radios = data.order.map((item) => ({
    type: "radio",
    name: "order",
    value: item.value,
    label: item.label,
    checked: order === item.value,
    onCheckedChange: (checked) => setOrder(checked ? item.value : ""),
  }))

  const checkboxes = data.type.map((item) => ({
    type: "checkbox",
    name: "type",
    value: item.value,
    label: item.label,
    checked: type.includes(item.value),
    onCheckedChange: (checked) =>
      setType((prev) =>
        checked ? [...prev, item.value] : prev.filter((x) => x !== item.value),
      ),
  }))

  return (
    <>
      <button {...api.getTriggerProps()}>Trigger</button>
      <div {...api.getPositionerProps()}>
        <div {...api.getContentProps()}>
          {radios.map((item) => {
            return (
              <div key={item.value} {...api.getOptionItemProps(item)}>
                <span {...api.getItemIndicatorProps(item)}>✅</span>
                <span {...api.getItemTextProps(item)}>{item.label}</span>
              </div>
            )
          })}
          <hr {...api.getSeparatorProps()} />
          {checkboxes.map((item) => {
            return (
              <div key={item.value} {...api.getOptionItemProps(item)}>
                <span {...api.getItemIndicatorProps(item)}>✅</span>
                <span {...api.getItemTextProps(item)}>{item.label}</span>
              </div>
            )
          })}
        </div>
      </div>
    </>
  )
}
```
